<template>
  <scroll-view :scroll-top="0" scroll-y="true" class="full">
  <view class="container border-box py_lg">
    <view class="row justify-content-center">
      <view class="col-12 col-sm-8 col-md-6 col-xl-4">
        <view class="py_lg">
          <view class="h1 weight_bolder color_darker">{{
            $t('register.heading')
          }}</view>
          <view class="color_light">{{ $t('register.subheading') }}</view>
        </view>
        <u-form class="mt_lg" :model="formState" :rules="rules" ref="formRef">
          <u-form-item prop="phoneOrEmail">
            <u-input
              v-model="formState.phoneOrEmail"
              :placeholder="$t('register.form.email.placeholder')"
              prefixIcon="email-fill"
            ></u-input>
          </u-form-item>
          <u-form-item prop="captcha">
            <u-input
              v-model="formState.captcha"
              :placeholder="$t('register.form.verification.placeholder')"
              prefixIcon="search"
            >
              <template #suffix>
                <u-button
                  @tap="handleSendCode"
                  :text="codeHint"
                  :disabled="countdown > 0 || !formState.phoneOrEmail"
                   class="input-btn"
                ></u-button>
              </template>
            </u-input>
          </u-form-item>
          <u-form-item prop="password">
            <u-input
            type="password"
              v-model="formState.password"
              :placeholder="$t('register.form.password.placeholder')"
              prefixIcon="lock-fill"
            >
              <template #suffix>
                <u-icon name="eye-off"></u-icon>
              </template>
            </u-input>
          </u-form-item>
          <u-form-item prop="confirmPassword">
            <u-input
              v-model="formState.confirmPassword"
              :placeholder="$t('register.form.confirmPassword.placeholder')"
              prefixIcon="lock-fill"
            >
              <template #suffix>
                <u-icon name="eye-off"></u-icon>
              </template>
            </u-input>
          </u-form-item>
          <u-form-item class="mt_lg">
            <u-button
              type="primary"
              @click="handleSubmit"
              :text="$t('register.form.submit')"
              shape="circle"
            ></u-button>
          </u-form-item>
        </u-form>
      </view>
    </view>
  </view>
</scroll-view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useFormState, useAuthCode } from './hooks';
import { useNavigationBar } from '@/pages/hooks';
export default defineComponent({
  name: 'Register',
  setup() {
    useNavigationBar('register')
    const { formRef, formState, rules, handleSubmit } = useFormState();
    const { countdown, codeHint, handleSendCode } = useAuthCode(formState);
    return {
      formRef,
      formState,
      rules,
      handleSubmit,
      countdown,
      codeHint,
      handleSendCode,
    };
  },
});
</script>

<style lang="scss" scoped></style>
